<template>
	<view class="dict-warp">
		<u--input
			:value="value"
			disabled
			:disabledColor="disabledColor?disabledColor:disabled?'#f5f7fa':'#ffffff'"
			:placeholder="placeholder"
			v-bind="$attrs"
			@click="iconClick"
		>
			<u-icon
				v-if="!disabled"
				slot="suffix"
				name="arrow-right"
				@click="iconClick"
				:disabled="disabled"
			></u-icon>
		</u--input>
		<u-datetime-picker
			:closeOnClickOverlay="true" 
			:show="show"
			mode="datetime"
			v-model="value"
			@cancel="show = false" 
			@close="show = false" 
			@confirm="selectOk"
		>
		</u-datetime-picker>
	</view>
</template>
<!-- 直接使用uni-datetime-picker替换 -->
<script>
	export default {
		name: 'DatePicker',
		props: {
			value: String,
			placeholder:{
				type:String,
				default:'请选择'
			},
			format:{
				type:String,
				default:'yyyy-mm-dd hh:MM:ss'
			},
			disabled:Boolean,
			disabledColor:String
		},
		data() {
			return {
				show:false
			}
		},
		methods: {
			selectOk({value}){
				const date = uni.$u.timeFormat(value,this.format)
				this.$emit('change',date)
				this.show = false
			},
			iconClick(){
				if(!this.disabled){	
					this.show = true
				}
				hideKeyboard()
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		}
	}
</script>

<style lang="scss" scoped>
.dict-warp{
	width: 100%;
}
</style>